<script type="text/javascript">
	
	validation_users = null;
	userslist_createimageWindows = null;
	$(document).ready(function () {
		/* DECLARATION VARIABLE */
		/* General Variable */
		var theme = 'fresh';
		var userslist_source;
		var userslist_dataAdapter;

		/* Area and Field Variable */
		var userslist_menu = $("#userslist_menu");
		var userslist_content = $("#userslist_content");
		var userslist_expander = $("#userslist_expander");
		var userslist_form = $("#userslist_form");
		var userslist_gridview = $("#userslist_gridview");
		var userslist_search_textfield = $("#userslist_search_textfield");
		var userslist_searchbutton = $("#userslist_searchbutton");
		var userslist_addbutton = $("#userslist_addbutton");
		var userslist_editbutton = $("#userslist_editbutton");
		var userslist_deletebutton = $("#userslist_deletebutton");
		var userslist_resetbutton = $("#userslist_resetbutton");
		var userslist_validasiwindow = $("#userslist_validasiwindow");
		var userslist_btnokValidasiWindow = $("#userslist_btnokValidasiWindow");
		var userslist_btnsaveValidasiWindow = $("#userslist_btnsaveValidasiWindow");
		var userslist_contentValidasiWindow = $("#userslist_contentValidasiWindow");
		var userslist_syaratgridview = $("#userslist_syaratgridview");
		var userslist_nomasukValidasiWindow = $("#userslist_nomasukValidasiWindow");
		var userslist_tglmasukValidasiWindow = $("#userslist_tglmasukValidasiWindow");
		/* END DECLARATION VARIABEL */

		/* SET TYPE AND THEME */
		$('.field_input').addClass('jqx-input');
		$('.field_input').addClass('field');
		$('.field_input').addClass('jqx-rc-all');

		userslist_menu.jqxMenu({ align: 'left', width: '925px', height: '27px', autoOpen: false, autoCloseOnMouseLeave: false, showTopLevelArrows: true, theme: theme });
		userslist_menu.css('visibility', 'visible');
		userslist_addbutton.jqxButton({ theme : theme, width : '70px', height : '18px' });
		userslist_editbutton.jqxButton({ width : '70px' , height : '18px' ,theme : theme });
		userslist_deletebutton.jqxButton({ width : '70px' , height : '18px' ,theme : theme });
		userslist_searchbutton.jqxButton({ theme : theme, width : '70px', height : '18px' });
		userslist_resetbutton.jqxButton({ theme : theme, width : '70px', height : '18px' });
		userslist_btnokValidasiWindow.jqxButton({ theme : theme, width : 70, height : 25 });
		userslist_btnsaveValidasiWindow.jqxButton({ theme : theme, width : 120, height : 25 });
		userslist_validasiwindow.jqxWindow({ width: 800, height: 350, resizable: false, theme: theme, isModal: true, autoOpen: false, okButton: userslist_btnokValidasiWindow, modalOpacity: 0.4, showCloseButton: false });


		var userslist_source = {
			id : 'id',
			datatype : "json",
			url : "<?php echo base_url(); ?>c_users/users_list",
			root : "results",
			datafields : [
				{ name : 'id' },
				{ name : 'username' },
				{ name : 'group_name' },
				{ name : 'group_id' },
				{ name : 'email' },
				{ name : 'fullname' },
				{ name : 'handphone' },
				{ name : 'last_login_date' }
			],
			beforeprocessing : function(data){
				userslist_source.totalrecords = data[0].TotalRows;
			}
		}
		var userslist_dataAdapter = new $.jqx.dataAdapter(userslist_source);

		userslist_gridview.jqxGrid({
			source : userslist_dataAdapter,
			width : 925,
			theme : theme,
			pageable : true,
			autoheight : true,
			sortable : true,
			filterable : true,
			columnsresize : true,
			virtualmode : true,
			pagesize : 15,
			pagesizeoptions : [15],
			rendergridrows : function(){
				return userslist_dataAdapter.records;
			},
			columns : [
				{text : 'Username', dataField : 'username', width : 100},
				{text : 'Group', dataField : 'group_name', width : 100},
				{text : 'Email', dataField : 'email', width : 250},
				{text : 'Fullname', dataField : 'fullname', width : 150},
				{text : 'Handphone', dataField : 'handphone', width : 150},
				{text : 'Last Login', dataField : 'last_login_date', width : 150}
			]
		});


		/* DECLARATION FUNCTION */
		function reset_form(){
		}
		function refresh_grid(){
			userslist_gridview.jqxGrid('updatebounddata');
		}

		userslist_addbutton.click(function(){
			$('#userslist_content').empty();
			$('<img src="./images/loader.gif" style="margin:50px auto auto 390px;">').appendTo('#contents');
			$('#userslist_content').load('index.php/c_users/users_addedit');
		});

		userslist_editbutton.click(function(){
			var users_id = '';
			var rowindex = userslist_gridview.jqxGrid('getselectedrowindex');
			var data_record = userslist_gridview.jqxGrid('getrowdata', rowindex);
			if(data_record !== null){
				users_id = data_record.id;
				$('#userslist_content').empty();
				$('<img src="./images/loader.gif" style="margin:50px auto auto 390px;">').appendTo('#contents');
				$('#userslist_content').load('index.php/c_users/users_addedit/'+users_id);
			}else{
				alert("Pilih salah satu field yang ingin diubah");
			}
		});

		userslist_searchbutton.click(function(){
			var search_text = userslist_search_textfield.val();
			userslist_source['url'] = "index.php/c_users/users_list?query=" + search_text;
			userslist_gridview.jqxGrid('gotopage',0);
			userslist_dataAdapter.dataBind();
		});
		userslist_resetbutton.click(function(){
			userslist_search_textfield.val("");
			userslist_source['url'] = "index.php/c_users/users_list";
			userslist_gridview.jqxGrid('gotopage',0);
			userslist_dataAdapter.dataBind();
		});

		userslist_deletebutton.click(function(){
			var rowindex = userslist_gridview.jqxGrid('getselectedrowindex');
			var data_record = userslist_gridview.jqxGrid('getrowdata', rowindex);
			if(data_record !== null){

			if(window.confirm("Apakah anda yakin menghapus data ini ? ")){
				$(document).ready(function () {
					$.ajax({
						url : 'index.php/c_users/users_delete',
						type : 'POST',
						data : {
							id : id
						}, success : function(msg){
							var result = eval(msg);
							if(result == 1){
								$("#userslist_gridview").jqxGrid('updatebounddata');
								alert("Data sukses dihapus");
							}else{
								alert("Data gagal dihapus");
							}
						}
					});

				});
			}
		}

		});

		function userslist_view(event, type ,file){
			userslist_createimageWindows(type ,file);
		}

		function userslist_edit(event, id) {
			self.location='index.php/c_users/get_action&task=update/' + id;
		}

		function userslist_validasi(event, row) {
			validation_permohonan(row);
		}

});
</script>
<style type="text/css">
	.field{
		height : 22px;
	}
</style>
	<!-- Begin one column window -->
<br class="clear"/>
<div class="header">
	<span><h1>USERS</h1></span>
</div>
<div id="userslist_content">
	<div id="userslist_menu">
		<div id='userslist_addbutton' style="float:left;">
			<img style='float: left; margin: 0px;' src='./images/icons/add.png' />
			<div style='float: left; margin-left: 4px;'>Baru</div>
		</div>
		<div id='userslist_editbutton' style="float:left;">
			<img style='float: left; margin: 0px;' src='./images/icons/page_edit.png' />
			<div style='float: left; margin-left: 4px;'>Ubah</div>
		</div>
		<div id='userslist_deletebutton' style="float:left;">
			<img style='float: left; margin: 0px;' src='./images/icons/delete.png' />
			<div style='float: left; margin-left: 4px;'>Hapus</div>
		</div>
		<div style="float:left;">
			<input type="text" id="userslist_search_textfield" class="field_input" style="height: 24px; width : 200px; background-color : #FFFFFF;">
		</div>
		<div id='userslist_searchbutton' style="float:left;">
			<img style='float: left; margin: 0px;' src='./images/icons/search.gif' />
			<div style='float: left; margin-left: 4px;'>Cari</div>
		</div>
		<div id='userslist_resetbutton' style="float:left;">
			<img style='float: left; margin: 0px;' src='./images/icons/table_refresh.png' />
			<div style='float: left; margin-left: 4px;'>Reset</div>
		</div>
	</div>
	<div id="userslist_gridview"></div>
</div>